$(function () {
	showMap();
	
    vm.showGraph();
});

var vm = new Vue({
	el:'#rrapp',
	data:{
		gas: {
			carsum:0,
			peronsum:0,
			gasnumber:0,
		},
		showList: true
	},
	methods: {
		showGraph: function(){
			var myChart = echarts.init(document.getElementById('showGraph'));
		    var option = {
		    	    title: {
		    	        text: '数据流'
		    	    },
		    	    tooltip: {},
		    	    animationDurationUpdate: 1500,
		    	    animationEasingUpdate: 'quinticInOut',
		    	    series : [
		    	        {
		    	            type: 'graph',
		    	            layout: 'none',
		    	            symbolSize: 50,
		    	            roam:false,
		    	            label: {
		    	                normal: {
		    	                    show: true
		    	                }
		    	            },
		    	            edgeSymbol: ['circle', 'arrow'],
		    	            edgeSymbolSize: [4, 10],
		    	            edgeLabel: {
		    	                normal: {
		    	                    textStyle: {
		    	                        fontSize: 20
		    	                    }
		    	                }
		    	            },
		    	            data: [{
		    	                name: 'Start',
		    	                x: 50,
		    	                y: 200
		    	            }, {
		    	                name: 'A',
		    	                x: 200,
		    	                y: 200
		    	            }, {
		    	                name: 'B',
		    	                x: 400,
		    	                y: 100
		    	            }, {
		    	                name: 'C',
		    	                x: 400,
		    	                y: 300
		    	            }, {
		    	                name: 'D',
		    	                x: 600,
		    	                y: 200
		    	            }, {
		    	                name: 'End',
		    	                x: 800,
		    	                y: 200
		    	            }],
		    	            links: [{
		    	                source: 'Start',
		    	                target: 'A'
		    	            },{
		    	                source: 'A',
		    	                target: 'B'
		    	            }, {
		    	                source: 'A',
		    	                target: 'C'
		    	            }, {
		    	                source: 'B',
		    	                target: 'D'
		    	            }, {
		    	                source: 'C',
		    	                target: 'D'
		    	            }, {
		    	                source: 'D',
		    	                target: 'End'
		    	            }],
		    	            lineStyle: {
		    	                normal: {
		    	                    opacity: 0.9,
		    	                    width: 2,
		    	                    curveness: 0
		    	                }
		    	            }
		    	        }
		    	    ]
		    	};

	        myChart.setOption(option);
		},
		getInfo: function(x,y){
			$.get(baseURL + "bdbusiness/aindustygas/gasnum?param=0.01&ns="+y+"&we="+x, function(r){
				vm.gas = r.data;
//				if(vm.gas.carsum==0 && vm.gas.peronsum==0){
//					alert("暂无此地相关数据！")
//				}
//				console.log(r);
            });
		},
	}
});


var mapName = [ '宽城区', '德惠市', '绿园区', '二道区', '长春市朝阳区', '南关区', '双阳区', '九台区','农安县', '榆树市' ];
var map = new BMap.Map("allmap", {
    minZoom : 9,  
    maxZoom : 18,
	enableMapClick : false,
	mapType : BMAP_NORMAL_MAP
}); // 创建Map实例

var districtLoading = 0;

function showMap() {
	
	map.setMapStyle({
		styleJson : [{ // 不显示点信息
			"featureType" : "poi",
			"elementType" : "all",
			"stylers" : {
				"color" : "#ffffff",
				"visibility" : "off"
			}
		} ]
	});
	map.centerAndZoom(new BMap.Point(125.3, 43.9), 10); // 初始化地图,设置中心点坐标和地图级别
	// 添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
	}));
	map.setCurrentCity("长春"); // 设置地图显示的城市
	map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

	for (var i = 0; i < mapName.length; i++) {
		getMap(mapName[i])
	}
	// =================单击地图监听事件==========================
	map.addEventListener("click", function(e) {
		removeMarkerPoint();
		addMarker(e.point.lng, e.point.lat);
//		console.log(e.point.lng, e.point.lat);
		vm.getInfo(e.point.lng, e.point.lat);
	});
	

	map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})); 
	map.addControl(new BMap.NavigationControl()); 
	
}
// 编写自定义函数,创建标注
function addMarker(x,y){
	var point = new BMap.Point(x,y);
	overlayMarker = new BMap.Marker(point);  // 创建标注
	map.addOverlay(overlayMarker);               // 将标注添加到地图中
//	overlayMarker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}
var overlayMarker;
//清除标注
function removeMarkerPoint(){
	if(overlayMarker)
	map.removeOverlay(overlayMarker);       
}
function getMap(name) {
	var bdary = new BMap.Boundary();
	bdary.get(name, function(rs) { // 获取行政区域
		// map.clearOverlays(); //清除地图覆盖物
		var count = rs.boundaries.length; // 行政区域的点有多少个
		if (count === 0) {
			alert('未能获取当前输入行政区域');
			return;
		}
		var pointArray = [];
		for (var i = 0; i < count; i++) {
			var ply = new BMap.Polygon(rs.boundaries[i], {
				strokeWeight : 2,
				strokeColor : "#3388ff",
				fillOpacity : 0.1,
			// fillColor: "#c6dafd"
			}); // 建立多边形覆盖物
			map.addOverlay(ply); // 添加覆盖物
			pointArray = pointArray.concat(ply.getPath());
		}
		// map.setViewport(pointArray); //调整视野
		// 添加文本标注
		if (name == '长春市朝阳区') {
			name = '朝阳区'
		}
		var centerlabel = new BMap.Label(name, {
			offset : new BMap.Size(0, 0)
		});
		centerlabel.setStyle({
			width : '40px',
			height : '15px',
			textAlign : 'center',
			borderColor : '#3eb7a6',
			borderRadius : '3px',
			paddingLeft : '2px',
			paddingRight : '2px',
			lineHeight : "16px",
			color : "#fff",
			fontSize : "12px",
			backgroundColor : "#3388ff",
			border : "1",
			opacity : "0.6"
		});
//		centerlabel.setPosition(ply.getBounds().getCenter());//样式冲突
//		map.addOverlay(centerlabel);
	})
}